<template>
	<view>
		<!-- <u-navbar @leftClick="leftClick" leftText="返回" :title="data.title" placeholder fixed>
		</u-navbar> -->
		<u-navbar :title="data.title" placeholder fixed>
			<view class="navbar-left-text" slot="left">
				<view v-if="!isShowBackHome"  @click="leftClick" class="">返回</view>
			</view>
			<view class="navbar-left-text" slot="left">
				<uni-icons v-if="isShowBackHome" type="home-filled" size="24" style="margin-left: 10rpx;" @click="goHome"></uni-icons>
			</view>
		</u-navbar>
		
		<view class="swiper-box">
			<u-swiper @click="swiperGo(swiper,$event)" v-if="type == 1" @change="cutSwiper" :list="swiper" :autoplay="false" height="750rpx" keyName="image"></u-swiper>
			<view class="video" v-if="type == 0">
				<video class="img_b" controls :poster="data.video_image" loop :src="data.video" @tap="togglePlay" :paused="isPaused"></video>
			</view>
			<view class="swiper-time">更新时间：{{data.updatetime}}</view>
			<view class="swiper-type">
				<text @click="curType(0)" :class="{'currentType':type == 0}">视频</text>
				<text @click="curType(1)" :class="{'currentType':type == 1}">图片</text>
			</view>
			<view class="schedule" v-if="type == 1">
				{{current}}/{{swiper.length}}
			</view>
		</view>
		
		<view class="info-box">
			<view class="price-box" v-if="sort == 1 || sort == 0">
				<text class="price">{{data.total_price}}</text> <text class="square">{{data.unit_price}}/平</text>
			</view>
			<view class="price-box" v-if="sort == 2">
				<text class="price">{{data.unit_price}}</text> <text class="square2">/月</text>
			</view>
			<view class="price-box" v-if="sort == 3">
				<text class="price">{{data.price}}</text> <text class="square2">/月</text>
			</view>
			<view class="title"> <text user-select>{{data.title}}</text> </view>
			<view class="tags">
				<text class="each-tag" v-for="i in data.facilities">{{i}}</text>
				
			</view>
			<view class="wire"></view>
			<view class="introduce">
				<view class="introduce-each" v-if="data.num_room">
					<view class="ask">房型</view>
					<view class="answer">{{data.num_room}}室{{data.num_parlor}}厅{{data.num_toilet}}卫</view>
				</view>
				<view class="introduce-each" v-if="data.area">
					<view class="ask">面积</view>
					<view class="answer">{{data.area}}㎡</view>
				</view>
				<view class="introduce-each" v-if="data.resources_floor">
					<view class="ask">楼层</view>
					<view class="answer">{{data.resources_floor}}</view>
				</view>
				<view class="introduce-each" v-if="data.toward">
					<view class="ask">朝向</view>
					<view class="answer">{{data.toward}}</view>
				</view>
			</view>
		</view>
		
		<view class="house-int">
			<view class="house-title">房源介绍</view>
			<view class="coutent">{{data.introduce}}</view>
			
			<invite></invite>
		</view>
		
		<view class="fixation">
			<!-- <invite></invite> -->
		</view>
		
		
		
		
		<view class="" style="text-align: center;font-size: 32rpx;font-weight: 800;">
			为你推荐
		</view>
		<!-- 推荐列表 -->
		<view class="list-box">
			<u-empty mode="list" v-if="houseList.length == 0" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
			<view v-else class="each-box" @click="godetail(item.id,item.type)" v-for="(item,index) in houseList">
				<view class="img">
					<image :src="oss(item.face_image)" mode="aspectFill"></image>
					<image class="video_img" v-if="item.video" style="width: 38rpx;height: 38rpx;" src="../../static/video.png" mode=""></image>
				</view>
				<view class="text-box">
					<view class="title"> <text class="top" v-if="item.switch">置顶</text> {{item.title}} </view>
					<view class="tags">
						<text class="each-tag" v-for="i in item.facilities">{{i}}</text>
					</view>
					<view v-if="item.type == 'transference'" class="parameter">{{item.area}}㎡ / {{item.village}}</view>
					<view v-if="item.type != 'transference'" class="parameter">{{item.num_room}}室{{item.num_parlor}}厅{{item.num_toilet}}卫 / {{item.area}}㎡ / {{item.village}}</view>
					<view class="price" v-if="item.type=='house'"> <text class="text">{{item.total_price==0?'面议':item.total_price}}</text> <text v-if="item.total_price != 0">万</text> </view>
					<view class="price" v-if="item.type=='rent'">
						 <text class="text">{{item.unit_price==0?'面议':item.unit_price}}</text> <text v-if="item.unit_price != 0">元/月</text> 
					</view>
					<view class="price" v-if="item.type=='transference'">
						<text class="text">{{item.price==0?'面议':item.price}}</text> <text v-if="item.price != 0">元/月</text> 
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		<view class="bottom-box">
			<!-- <text class="fx-btn"><button open-type="share" class="fx-btn"></button>分享</text> -->
			<view class="name">{{data.name}}</view>
			<view class="" style="display: flex;">
				<view class="relation-btn" @click="playPinnedShow">帮他置顶</view>
				<view class="relation-btn" style="margin-left: 24rpx;" @click="IdlePurchase">求购求租</view>
				<view class="relation-btn" style="margin-left: 24rpx;" @click="relation">电话联系</view>
			</view>
		</view>
		<!-- 置顶弹窗 -->
		<TopPopup :ispublish="0" :show1="pinnedShow" :meal="meal" @padlock="padlock" @ckeck="ckeck"></TopPopup>
		
		<view class="cotton"></view>
		
		<u-popup :show="show" mode="center" round="10" @close="show = false">
			<view class="join-box">
				<view class="pop-title">当前积分不足，无法拨打电话</view>
				
				<view class="btn-box">
					<view class="qx-btn" @click="show = false">取消</view>
					<view class="qd-btn" @click="tointegral">赚取积分</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show2" mode="center" round="10" @close="show = false">
			<view class="join-box">
				<view class="pop-title">消耗{{data.score}}积分，立即拨打对方电话</view>
				
				<view class="btn-box">
					<view class="qx-btn" @click="show2 = false">取消</view>
					<view class="qd-btn" @click="deduct">拨打</view>
				</view>
			</view>
		</u-popup>
		
		
		<!-- 一键分享 -->
		<!-- <view class="share">
		    <u-button id="shareBtn" open-type="share">分享</u-button>
		</view> -->
		
		<view class="share-box">
			<button id="share1" class="iconfont icon-yaoqing" style="width: 110rpx;height: 110rpx;z-index: 99;" open-type="share"></button>
			<image class="fenx-img" src="../../static/newMy/zf.png" mode=""></image>
		</view>
		<text class="fenxiang">分享给朋友</text>
		
		<!-- <view class="share-box2">
			<button id="share2" class="iconfont icon-yaoqing" style="width: 110rpx;height: 110rpx;z-index: 99;" open-type="share"></button>
			<image class="fenx-img2" src="../../static/newMy/pyq.png" mode=""></image>
		</view>
		<text class="fenxiang2">分享到朋友圈</text> -->
	</view>
</template>

<script>
	import invite from "@/components/invite.vue"
	import TopPopup from "@/components/topPopup.vue"
	export default {
		components: {
			invite,TopPopup
		},
		data() {
			return {
				swiper:[],
				type:1,
				current:1,
				show: false,
				id:'',
				sort:'',
				data:'',
				score:'',
				show2:false,
				pages:'',
				isPaused: false,
				
				status: 'loadmore',
				flag: false,
				houseList:[],
				page:1,
				isShowBackHome:false,
				pinnedShow:false,//置顶弹窗
				paytype:2,
				meal:[],
				myMoney:0
			}
		},
		onShareAppMessage: function(res) {
			return {
			  title: this.data.title,
			  path: '/pagesA/index/index_detail?id=' + this.id + '&sort=' + this.sort,
			  imageUrl:this.swiper[0].image, // 设置分享卡片图片
			  success: function() {
			    uni.showToast({
			      title: '分享成功',
			      icon: 'success'
			    })
			  }
			}
		},
		onShareTimeline(){
		    return{
		      title:this.data.title,  //分享的标题
		      query: {
				  id:this.id,
				  sort:this.sort
			  },     //点击分享链接之后进入的页面路径
		      imageUrl:this.swiper[0].image, // 设置分享卡片图片
		    }
		},
		onReachBottom() {
			console.log('````````````')
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.status = 'loading';
			if(this.sort == 1 || this.sort == 0){
				this.gethouseList()//二手房
			}
			if(this.sort == 2){
				this.getrentgetList()//出租房
			}
			if(this.sort == 3){
				this.gettransferenceList()//商业地产
			}
		},
		onLoad(op) {
			this.id = op.id
			this.sort = op.sort
			
			if(this.sort == 1 || this.sort == 0){
				this.gethouseDetail() //二手房详情
				this.gethouseList()//二手房列表
			}
			if(this.sort == 2){
				this.getrentgeDetail()//出租房
				this.getrentgetList()//出租房列表
			}
			if(this.sort == 3){
				this.gettransferenceDetail()//地产
				this.gettransferenceList()//商业地产列表
			}
			
			let pages = getCurrentPages()
			if(pages.length === 1){
				this.isShowBackHome = true
			}
			if(uni.getStorageSync('token')){
				this.getcombo()
				this.getMoney()
			}
			// #ifdef MP-WEIXIN
			this.paytype = 2
			// #endif
			// #ifdef APP
			this.paytype = 1
			// #endif
			console.log(pages,'pagespagespages')
		},
		methods: {
			playPinnedShow(){
				if(!uni.getStorageSync('token')){
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
					return
				}
				this.pinnedShow = true
			},
			getMoney(){
				uni.$u.http.post('/getmoney ').then(res => {
					if (res.code === 1) {
						this.myMoney = res.data
					}
				}).catch((res) => {
					
				})
			},
			ckeck(e) {
				console.log(this.data.id,'....')
				if(!e.id) return this.toast('请选择置顶套餐')
				if(this.myMoney < e.money){
					//余额不足 微信支付
					uni.$u.http.post('/meallist', {
						type:this.sort == 0 ? 1 : this.sort,
						order_id:this.data.id,
						id:e.id,
						paytype:this.paytype
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							let that = this
							uni.requestPayment({
								appId: res.data.pay.appId,
								nonceStr: res.data.pay.nonceStr,
								package: res.data.pay.package,
								paySign: res.data.pay.paySign,
								signType: res.data.pay.signType,
								timeStamp: res.data.pay.timeStamp,
								success: (e) => {
									that.toast(res.msg)
									that.pinnedShow = false
								},
								fail: (e) => {
									that.$u.toast('支付失败');
								}
							})
						}
					}).catch((res) => {
							
					})
				}else {
					//余额支付
					uni.$u.http.post('/meallist', {
						type:this.sort == 0 ? 1 : this.sort,
						order_id:this.data.id,
						id:e.id,
						paytype:4
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.toast(res.msg)
							this.pinnedShow = false
						}
					}).catch((res) => {
							
					})
				}
			},
			// 取消置顶
			padlock(){
				this.pinnedShow = false
			},
			//置顶套餐
			getcombo() {
				uni.$u.http.post('/meallist',{
					mealtype:this.sort == 0 ? 1 : this.sort
				}).then(res => {
					if (res.code == 1) {
						this.meal = res.data
					}
				}).catch((res) => {
				})
			},
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			IdlePurchase(){
				if(uni.getStorageSync('token')){
					uni.navigateTo({
						url:'/pagesA/index/upload?type=1'
					})
				}else {
					uni.reLaunch({
						url:'/pagesA/auth/login'
					})
				}
				
			},
			godetail(id) {
				uni.redirectTo({
					url:'/pagesA/index/index_detail?id=' + id + '&sort=' + this.sort
				})
			},
			// 推荐列表//////////////////
			//商业地产
			gettransferenceList(){
				this.flag = false
				this.status = 'loading';
				uni.$u.http.post('/transference/getList',{
					page:this.page,
					search:'',
					transcate_id:''
				}).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.houseList = this.houseList.concat(res.data)
						if (res.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {
				
				})
			},
			//出租房
			getrentgetList(){
				this.flag = false
				this.status = 'loading';
				uni.$u.http.post('/rent/getList',{
					page:this.page,
					search:'',
					moneyrange:'',
					num_room:'',
					num_parlor:'',
					num_toilet:''
				}).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.houseList = this.houseList.concat(res.data)
						if (res.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {
				
				})
			},
			// 二手房列表
			gethouseList(){
				this.flag = false
				this.status = 'loading';
				uni.$u.http.post('/house/getList',{
					page:this.page,
					search:'',
					moneyrange:'',
					num_room:'',
					num_parlor:'',
					num_toilet:''
				}).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.houseList = this.houseList.concat(res.data)
						if (res.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {
				
				})
			},
			leftClick(){
				uni.navigateBack()
			},
			swiperGo(imgs,e){
				console.log(imgs,e)
				let arr =[]
				imgs.map(item=>{
					arr.push(item.image)
				})
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			
			
			
			curType(i){
				if(this.data.switch == 1){
					this.type = i
				}else {
					uni.$u.toast('该用户暂无开通视频功能')
				}
			    
			},
			 togglePlay() {
			      this.isPaused = !this.isPaused;
			    },
			//拨打
			dial(){
				uni.$u.http.post('/mobilelog',{
					mobile:this.data.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.makePhoneCall({
							phoneNumber: this.data.mobile
						});
					}
				}).catch((res) => {
				
				})
			},
			deduct(){
				uni.$u.http.post('/index/phone',{
					id:this.id,
					type:this.sort == 1 ? 'house' : this.sort == 2 ? 'rent' : 'transference'
				}).then(res => {
					if (res.code == 1) {
						this.show2 = false
						this.dial()
						if(this.sort == 1){
							this.gethouseDetail() //二手房详情
						}
						if(this.sort == 2){
							this.getrentgeDetail()//出租房
						}
						if(this.sort == 3){
							this.gettransferenceDetail()//地产
						}
					}
				}).catch((res) => {
					this.show2 = false
					this.show = true
					console.log(res)
				})
			},
			//联系
			relation(){
				if(this.data.is_phone){
					this.dial()
				} else {
					if(this.data.score == 0){
						this.dial()
					} else {
						this.show2 = true
					}
				}
				return
				if(uni.getStorageSync('token')){
					
				}else {
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
				}
			},
			//赚取积分
			tointegral(){
				uni.redirectTo({
					url: '/pages/my/renWu/jiFen'
				});
			},
			//地产
			gettransferenceDetail(){
				uni.$u.http.post('/transference/getDetail',{
					id:this.id
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.swiper = this.data.images.map(value => {
							return {
								image: this.oss(value),
								url: value
							}
						})
						uni.setNavigationBarTitle({
						  title:this.data.title
						});
					}
				}).catch((res) => {
				
				})
			},
			//出租房详情
			getrentgeDetail(){
				uni.$u.http.post('/rent/getDetail',{
					id:this.id
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.swiper = this.data.images.map(value => {
							return {
								image: this.oss(value),
								url: value
							}
						})
						uni.setNavigationBarTitle({
						  title:this.data.title
						});
					}
				}).catch((res) => {
				
				})
			},
			//二手房详情
			gethouseDetail(){
				uni.$u.http.post('/house/getDetail',{
					id:this.id
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.swiper = this.data.images.map(value => {
							return {
								image: this.oss(value),
								url: value
							}
						})
						uni.setNavigationBarTitle({
						  title:this.data.title
						});
					}
				}).catch((res) => {
				
				})
			},
			cutSwiper(e){
				console.log(e)
				this.current = e.current+1
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.navbar-left-text {
		font-size: 34rpx;
		color: #333333;
	}
	.swiper-box {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		background: #D9D9D9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		
		.video {
			height: 750rpx;
			width: 750rpx;
			background-color: #010101;
			.img_b {
				height: 680rpx;
				width: 750rpx;
			}
		}
		
		.swiper-time {
			// width: 297rpx;
			// height: 52rpx;
			padding: 9rpx 16rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 0.7;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
		}
		.swiper-type {
			position: absolute;
			bottom: 102rpx;
			left: 50%;
			transform: translate(-50%,-50%);
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			z-index: 9;
			
			text {
				display: inline-block;
				padding: 12rpx 39rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
			.currentType {
				background: #FEBF4E;
			}
		}
		
		.schedule {
			position: absolute;
			bottom: 102rpx;
			right: 0;
			transform: translate(-50%,-50%);
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 0.5;
			padding: 9rpx 43rpx;
		}
	}
	
	.info-box {
		width: 622rpx;
		// height: 446rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		margin: auto;
		position: relative;
		top: -80rpx;
		padding: 32rpx;
		z-index: 9;
		
		.price-box {
			font-size: 28rpx;
			font-weight: 800;
			color: #FA6759;
			.price {
				font-size: 56rpx;
			}
			.square {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
			.square2 {
				font-size: 28rpx;
				font-weight: 500;
				color: #FA6759;
			}
		}
		.title {
			margin-top: 16rpx;
		}
		.tags {
			margin-top: 21rpx;
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			.each-tag {
				font-size: 20rpx;
				padding: 5rpx 8rpx;
				font-weight: 500;
				color: #666666;
				background-color: #F6F6F6;
				margin-right: 8rpx;
			}
		}
		.wire {
			width: 622rpx;
			height: 0rpx;
			opacity: 1;
			border: 1rpx solid #F0F0F0;
			margin-top: 40rpx;
		}
		
		.introduce {
			display: flex;
			justify-content: space-around;
			margin-top: 32rpx;
			.introduce-each {
				width: 150rpx;
				.ask {
					font-size: 24rpx;
					text-align: center;
					font-weight: 500;
					color: #999999;
				}
				.answer {
					font-size: 28rpx;
					text-align: center;
					font-weight: 500;
					color: #333333;
					margin-top: 18rpx;
				}
			}
		}
	}
	
	.house-int {
		width: 622rpx;
		// height: 221rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		padding: 32rpx;
		margin: auto;
		position: relative;
		top: -48rpx;
		.house-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}
		.coutent {
			font-size: 26rpx;
			margin-top: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	}
	
	.fixation {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9;
	}
	.bottom-box {
		position: fixed;
		bottom: 0;
		width: 686rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		align-items: center;
		.relation-btn {
			width: 184rpx;
			height: 74rpx;
			background: #FEBF4E;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			opacity: 1;
			font-size: 26rpx;
			text-align: center;
			line-height: 74rpx;
			font-weight: 500;
			color: #333333;
		}
		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333;
			.fx-btn {
				display: inline-block;
				width: 120rpx;
				height: 74rpx;
				background: #FEBF4E;
				border-radius: 37rpx 37rpx 37rpx 37rpx;
				opacity: 1;
				font-size: 26rpx;
				text-align: center;
				line-height: 74rpx;
				font-weight: 500;
				color: #333333;
				margin-left: 40rpx;
			}
		}
	}
	.cotton {
		height: 240rpx;
	}
	
	.join-box {
		width: 560rpx;
		height: 278rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		
		.pop-title {
			padding-top: 60rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		
		.btn-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 60rpx;
			padding: 0 24rpx;
			.qx-btn {
				width: 236rpx;
				height: 80rpx;
				background: #F6F6F6;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: 80rpx;
				text-align: center;
			}
			.qd-btn {
				width: 236rpx;
				height: 80rpx;
				background: #FEBF4E;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				line-height: 80rpx;
				text-align: center;
				color: #333;
			}
		}
	}
	
	
	    .share {
				// width: 110rpx;
				// height: 110rpx;
				background-color: #FEBF4E;
				color: #333;
				border-radius: 50%;
				// position: absolute;
				position: fixed;
				bottom: 300rpx;
				right: 29rpx;
				z-index: 9;
				#shareBtn {
					background-color: #FEBF4E;
					color: #333;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
			// /deep/ .u-button--info.data-v-2bf0e569 {
			// 	background-color: #FEBF4E !important;
			// 	border-style: none;
			// }
			
			.fenxiang {
				font-size: 24rpx;
				position: fixed;
				bottom: 45%;
				right: 30rpx;
				z-index: 9;
			}
			.share-box {
				position: fixed;
				bottom: 40%;
				right: 29rpx;
				z-index: 9;
				
				.fenx-img {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					top: -100rpx;
				}
			}
			//朋友圈
			 .fenxiang2 {
			 	font-size: 24rpx;
			 	position: fixed;
			 	bottom: 33%;
			 	right: 15rpx;
			 	z-index: 9;
			 }
			 .share-box2 {
			 	position: fixed;
			 	bottom: 28%;
			 	right: 29rpx;
			 	z-index: 9;
			 	
			 	.fenx-img2 {
			 		width: 100rpx;
			 		height: 100rpx;
			 		position: relative;
			 		top: -100rpx;
			 	}
			 }
			
			/* button自带样式清除 */
			.share-box button::after {
			  border: none !important;
			  padding: 0 !important;
			  margin: 0 !important;
			}
			
			.share-box button {
			  background-color: transparent !important;
			  padding: 0 !important;
			  line-height: inherit !important;
			  margin: 0 !important;
			  width: auto !important;
			  font-weight: 500 !important;
			  border-radius: none !important;
			}
			
			/* button自带样式清除 */
			.share-box2 button::after {
			  border: none !important;
			  padding: 0 !important;
			  margin: 0 !important;
			}
			
			.share-box2 button {
			  background-color: transparent !important;
			  padding: 0 !important;
			  line-height: inherit !important;
			  margin: 0 !important;
			  width: auto !important;
			  font-weight: 500 !important;
			  border-radius: none !important;
			}
			
			
			
			
			
			
			
			.list-box {
				margin: 0rpx 30rpx;
				.each-box {
					width: 638rpx;
					// height: 220rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					margin: auto;
					padding: 24rpx;
					margin-top: 24rpx;
					
					display: flex;
					align-items: center;
					.img {
						width: 220rpx;
						height: 220rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						background-color: #333333;
						position: relative;
						image {
							width: 220rpx;
							height: 220rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
						}
						.video_img {
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}
					.text-box {
						flex: 1;
						margin-left: 32rpx;
						
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
							.top {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								padding: 5rpx 8rpx;
								background: #FEBF4E;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								opacity: 1;
								display: inline-block;
								margin-right: 10rpx;
							}
						}
						.tags {
							margin-top: 21rpx;
							width: 380rpx;
							overflow: hidden;
							overflow-x: auto;
							white-space: nowrap;
							.each-tag {
								font-size: 20rpx;
								padding: 5rpx 8rpx;
								font-weight: 500;
								color: #666666;
								background-color: #F6F6F6;
								margin-right: 8rpx;
							}
						}
						.parameter {
							font-size: 22rpx;
							font-weight: 500;
							color: #333333;
							margin-top: 16rpx;
						}
						.price {
							font-size: 22rpx;
							font-weight: 800;
							color: #FA6759;
							margin-top: 18rpx;
							.text {
								font-size: 34rpx;
							}
						}
					}
					
				}
			}
</style>